<template>
  <view :style="{ position: fixed, width: '100%' }">
    <view class="content">
      <view class="sec1">
        <image
          class="bodh"
          :src="'https://www.123qifu.com/' + prayList.image"
          mode="widthFix"
        ></image>
        <view class="tables">
          <image
            v-if="active == 0"
            class="img"
            src="https://www.123qifu.com/onlineimages/static/r1.png"
            mode=""
          />
          <image
            v-if="active == 1"
            class="img"
            src="https://www.123qifu.com/onlineimages/static/r2.png"
            mode=""
          />
          <image
            v-if="active == 2"
            class="img"
            src="https://www.123qifu.com/onlineimages/static/r3.png"
            mode=""
          />
          <image
            v-if="active == 3"
            class="img"
            src="https://www.123qifu.com/onlineimages/static/r4.png"
            mode=""
          />
          <image
            v-if="active == 4"
            class="img img5"
            src="https://www.123qifu.com/onlineimages/static/r5.png"
            mode=""
          />
        </view>
        <view class="tribute">
          <view
            class="wish_one"
            v-for="(wish, index) in wishList"
            @click="wishClcik(index)"
            :key="index"
          >
            <image
              class="wishIm"
              :src="wish.imgUrl"
              style="width: 96rpx; margin-bottom: 15rpx"
              mode="widthFix"
            ></image>
            <text>{{ wish.text }}</text>
          </view>
        </view>
      </view>
      <view class="sec2">
        <view class="hTitle">祈福许愿</view>
        <view class="row">
          <view class="lef">
            <view class="txt">您的姓名：</view>
            <input style="flex: initial" type="text" v-model="username" />
          </view>
          <view class="lef">
            <view class="txt">年<span>龄：</span></view>
            <input style="flex: initial" type="number" v-model="age" />
          </view>
        </view>
        <view class="row">
          <view class="lef">
            <view class="txt">性别：</view>
            <picker @change="bindPicker1" :vlaue="sex_index" :range="sex_array">
              <view class="kun">{{ sex_array[sex_index] }}</view>
            </picker>
          </view>
          <view class="lef">
            <view class="txt">贡品：</view>
            <picker @change="bindPicker2" :vlaue="gp_index" :range="gp_array">
              <view class="kun">{{ gp_array[gp_index] }}</view>
            </picker>
          </view>
        </view>
        <view class="row">
          <view class="txt">祈愿主题：</view>
          <input type="text" v-model="title" />
        </view>
        <view class="row texa">
          <view class="txt">祈愿内容：</view>
          <textarea placeholder="请填写祈愿内容" v-model="content"></textarea>
        </view>
        <view class="row">
          <view class="txt">祈愿金额：</view>
          <input type="number" v-model="money" />
        </view>
        <view class="btns" @click="comnfirm">祈愿</view>
      </view>
    </view>
    <!-- 支付方式 -->
    <uni-popup ref="popupPay" type="bottom">
      <view class="payboxs">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <view class="zfje">
            支付金额：<text style="color: #c52b2e">{{ money || "0" }}元</text>
          </view>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yue.png"
                mode=""
              />
              <view class="col">
                <text>余额</text>
              </view>
            </view>
            <image
              v-if="actives == 0"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yonj.png"
                mode=""
              />
              <view class="col">
                <text>佣金</text>
              </view>
            </view>
            <image
              v-if="actives == 1"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(2)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/wechat.png"
                mode=""
              />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="actives == 2"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
        </scroll-view>
        <view class="pbtn" @click="comnfirmPay">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
        ></validcode>
      </view>
    </uni-popup>
    <uni-popup ref="popsuccue" type="center">
      <view class="popsuccue">
        <view class="txt">{{ text }}</view>
        <view class="btn" @click="cancell">确定</view>
        <view class="close" @click="cancell"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  data() {
    return {
      wishList: [
        {
          index: 1,
          imgUrl: "https://www.123qifu.com/onlineimages/static/g1.png",
          text: "供烛",
        },
        {
          index: 2,
          imgUrl: "https://www.123qifu.com/onlineimages/static/g2.png",
          text: "供香",
        },
        {
          index: 3,
          imgUrl: "https://www.123qifu.com/onlineimages/static/g3.png",
          text: "供灯",
        },
        {
          index: 4,
          imgUrl: "https://www.123qifu.com/onlineimages/static/g4.png",
          text: "供花",
        },
        {
          index: 5,
          imgUrl: "https://www.123qifu.com/onlineimages/static/g5.png",
          text: "供果",
        },
      ],
      sex_array: ["男", "女"],
      sex_index: 0, // 性别:1=男,2=女
      gp_array: ["供烛", "供香", "供灯", "供花", "供果"],
      gp_index: 0, //  供品类型:1=供烛,2=供香,3=供灯,4=供花,5=供果
      prayList: [],
      active: 0,
      actives: 2, // 支付方式
      toView: "",
      fixed: "",
      username: "", // 姓名
      age: "", // 年龄
      title: "", // 祈愿主题
      content:
        "愿以此功德 庄严佛净土 上报四重恩 下济三途苦 若有见闻者 悉发菩提心 尽此一报身 同生极乐国", // 祈愿内容
      money: "", // 祈愿金额
      page: "1", // 页码
      pageSize: "10", // 每页条数
      total: "",
      last_page: "",
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      payPassword: "", // 支付密码
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
      show: true,
      text: "",
      userInfo: "",
    };
  },
  components: {
    uniPopup,
  },
  onLoad(options) {
    this.Wishid = options.Wishid;
    this.token = uni.getStorageSync("token");
    this.userInfo = uni.getStorageSync("userInfo");
  },
  onShow() {
    this.getPrayList();
    this.getuserInfo();
  },
  methods: {
    bindPicker1(e) {
      this.sex_index = e.target.value;
    },
    bindPicker2(e) {
      this.gp_index = e.target.value;
      this.wishClcik(this.gp_index);
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.userInfo = res.data.data;
        uni.setStorageSync("userInfo", res.data.data);
      }
    },
    // 获取礼佛数据
    async getPrayList() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/get_lf_detail",
        method: "GET",
        data: {
          id: that.Wishid,
        },
      });
      that.prayList = res.data.data;
      wx.setNavigationBarTitle({
        // 动态添加头部标题
        title: that.prayList.title,
      });
    },

    // 在线祈福_生成订单
    async blessing() {
      const res = await this.$myRequest({
        url: "user/addBuddhistPrayNew",
        method: "POST",
        data: {
          id: this.Wishid,
          username: this.username,
          age: this.age,
          sex: Number(this.sex_index) + 1,
          type: Number(this.gp_index) + 1,
          title: this.title,
          content: this.content,
          money: this.money,
        },
      });
      this.orderCode = res.data.msg;
      this.$refs.popupPay.open(); // 选择支付方式
    },
    //选择贡品
    wishClcik(i) {
      this.active = i;
      this.gp_index = i;
    },
    // 祈愿
    comnfirm() {
      if (this.username == "") {
        uni.showToast({
          title: "请输入您的姓名",
          icon: "none",
        });
        return;
      }
      if (this.age == "") {
        uni.showToast({
          title: "请输入您的年龄",
          icon: "none",
        });
        return;
      }
      if (this.title == "") {
        uni.showToast({
          title: "请输入您的祈愿主题",
          icon: "none",
        });
        return;
      }
      if (this.content == "") {
        uni.showToast({
          title: "请输入您的祈愿内容",
          icon: "none",
        });
        return;
      }
      if (this.money == "") {
        uni.showToast({
          title: "请输入您的祈愿金额",
          icon: "none",
        });
        return;
      }
      this.blessing();
    },
    //选择支付方式
    changeActive(id) {
      this.actives = id;
      if (id == 0) {
        this.isCommission = 0;
      } else if (id == 1) {
        this.isCommission = 1;
      } else if (id == 2) {
        this.payment = "wx";
      }
    },
    // 确定支付
    comnfirmPay() {
      this.$refs.popupPay.close();
      if (this.actives == 0 || this.actives == 1) {
        // 判断是否设置支付密码
        if (this.userInfo.isSetPayPassword) {
          // 余额和佣金支付需要支付密码
          this.$refs.popPasword.open();
        } else {
          uni.showToast({
            title: "请先设置支付密码",
            icon: "none",
          });
          setTimeout(function () {
            uni.navigateTo({
              url: "../../orderPackages/pages/balance/balance",
            });
          }, 1000);
        }
      } else {
        this.h5Pay(); // 微信支付
      }
    },
    // 微信支付
    async h5Pay() {
      let that = this;
      const datas = await this.$myRequest({
        url: "pay/wx_pay",
        method: "POST",
        data: {
          order_sn: this.orderCode, //订单号
        },
      });
      if (datas.data.code == 1) {
        wx.requestPayment({
          appId: datas.data.data.appId, //公众号名称，由商户传入
          timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: datas.data.data.nonceStr, //随机串
          package: datas.data.data.package,
          signType: datas.data.data.signType, //微信签名方式：
          paySign: datas.data.data.paySign, //微信签名
          success: function (res) {
            if (res.errMsg == "requestPayment:ok") {
              uni.request({
                url: "https://www.123qifu.com/api/pay/weixin_getList",
                method: "POST",
                header: {
                  token: that.token,
                },
                data: {
                  order_sn: that.orderCode,
                },
                success: (res) => {
                  if (res.data.code == 1) {
                    that.text = res.data.msg;
                    that.$refs.popsuccue.open();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      icon: "none",
                    });
                  }
                },
              });
            }
          },
          fail: function (res) {},
          complete: function (res) {},
        });
      }
    },
      // 清楚支付密码
    clickParent() {
      this.$refs.pwd.clear();
    },
    // 支付密码输入完成
    getPwd(val) {
      this.moneyPay(val);
    },
    async moneyPay(val) {
      const res = await this.$myRequest({
        url: "pay/moneyPay",
        method: "POST",
        data: {
          orderCode: this.orderCode,
          isCommission: this.isCommission,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        this.text = res.data.msg;
        this.$refs.popPasword.close();
        this.$refs.popsuccue.open();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // 取消
    cancell() {
      this.$refs.popupPay.close();
      this.$refs.popPasword.close();
      this.$refs.popsuccue.close();
      this.fixed = "";
      this.clickParent();
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  min-height: 90vh;
  overflow-y: auto;
  .sec1 {
    width: 100%;
    height: 800rpx;
    background: url("https://www.123qifu.com/onlineimages/static/wishBg.png")
      no-repeat;
    background-size: 100% 100%;
    position: relative;
    .bodh {
      width: 510rpx;
      position: absolute;
      top: 50rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .tables {
    position: absolute;
    top: 350rpx;
    left: 50%;
    width: 550rpx;
    height: 300rpx;
    background: url("https://www.123qifu.com/onlineimages/static/Table.png")
      no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
    .img {
      position: absolute;
      width: 120rpx;
      height: 110rpx;
      left: 50%;
      transform: translateX(-50%);
      top: -20rpx;
      &.img5 {
        top: 0;
      }
    }
  }
  .tribute {
    width: 690rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20rpx;
    .wish_one {
      width: 25%;
      .wishIm {
        display: block;
        margin: 0 auto;
      }
      text {
        display: block;
        text-align: center;
        color: #fff;
      }
    }
  }
  .sec2 {
    width: 100%;
    min-height: 30vh;
    box-sizing: border-box;
    padding: 30rpx 50rpx;
    .hTitle {
      text-align: center;
      font-size: 34rpx;
      font-weight: 500;
      color: #c52b2e;
      margin-top: 38rpx;
      margin-bottom: 53rpx;
      position: relative;
    }
    .hTitle::before {
      position: absolute;
      content: "";
      width: 100rpx;
      height: 2rpx;
      background: #c52b2e;
      left: 98rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .hTitle::after {
      position: absolute;
      content: "";
      width: 100rpx;
      height: 2rpx;
      background: #c52b2e;
      right: 98rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 50rpx;
      &.texa {
        align-items: flex-start;
        textarea {
          display: block;
          // width: 530rpx;
          flex: 1;
          height: 152rpx;
          box-sizing: border-box;
          padding: 10rpx 20rpx;
          border: 1px solid #e8e8e8;
          border-radius: 4rpx;
          text-align: justify;
          font-size: 26rpx;
          color: #333333;
        }
      }
      .txt {
        display: block;
        width: 150rpx;
        margin-right: 15rpx;
        text-align-last: justify;
        font-size: 26rpx;
        color: #333333;
        font-weight: normal;
        white-space: nowrap;
      }
      .kun {
        width: 150rpx;
        height: 52rpx;
        border: 1rpx solid #e8e8e8;
        border-radius: 4rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
      }
      input {
        display: block;
        background: none;
        outline: none;
        flex: 1;
        height: 52rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        border: 1px solid #e8e8e8;
        border-radius: 4rpx;
        font-size: 26rpx;
        color: #333333;
      }
      .lef {
        width: 50%;
        display: flex;
        align-items: center;
        .sex {
          display: block;
          width: 150rpx;
          height: 52rpx;
          font-size: 26rpx;
          box-sizing: border-box;
          padding: 0 15rpx;
          outline: none;
          border: 1px solid #e8e8e8;
          border-radius: 4rpx;
          background: transparent;
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
        }
        input {
          width: 150rpx;
        }
      }
      .lef:nth-child(2) {
        justify-content: flex-end;
      }
    }
    .btns {
      display: block;
      width: 250rpx;
      height: 66rpx;
      text-align: center;
      line-height: 66rpx;
      background: #c52b2e;
      font-size: 30rpx;
      color: #ffffff;
      border-radius: 35rpx;
      margin: 60rpx auto;
    }
  }
}
.boxs {
  width: 100%;
  height: 1000rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  &.boxss {
    height: 500rpx;
    .selectPopup_one {
      margin-bottom: 50rpx;
      text {
        font-size: 34rpx;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #eee;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .scroll-y {
    height: 90%;
  }
  .xiaofei {
    display: flex;
    width: 702rpx;
    height: 150rpx;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #eeee;
    .fukuan {
      display: flex;
      align-items: center;
    }
  }
  .xiaofei:last-of-type {
    border-bottom: none;
  }
  .kuaiqu {
    .img {
      display: block;
      width: 288rpx;
      height: 156rpx;
      margin: 160rpx auto 0;
    }
    .nodata {
      text-align: center;
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      margin-top: 22rpx;
    }
  }
}
.payboxs {
  width: 100%;
  height: 700rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  .zfje {
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    padding: 30rpx;
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
    .zfje {
      width: 100%;
      text-align: center;
    }
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .col {
        text {
          display: block;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    > .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
  .pop_two:last-of-type {
    border-bottom: none;
  }
  .pbtn {
    width: 250rpx;
    height: 66rpx;
    text-align: center;
    line-height: 66rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 70rpx auto 0;
  }
}
.kuaiqu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.popsuccue {
  width: 478rpx;
  min-height: 506rpx;
  background: url("https://www.123qifu.com/onlineimages/static/popBg.png")
    no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-top: 1rpx;
  border-radius: 20rpx;
  position: relative;
  .txt {
    width: 100%;
    text-align: center;
    font-size: 26rpx;
    color: #333333;
    margin-top: 295rpx;
    box-sizing: border-box;
    padding: 0 65rpx;
  }
  .btn {
    width: 250rpx;
    height: 66rpx;
    background: #c52b2e;
    border-radius: 33rpx;
    text-align: center;
    line-height: 66rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 36rpx auto;
  }
  .close {
    position: absolute;
    width: 66rpx;
    min-height: 66rpx;
    background: url("https://www.123qifu.com/onlineimages/static/close.png")
      no-repeat;
    background-size: 100% 100%;
    bottom: -100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
